<template>
  <div>
    <van-nav-bar
      title="修改个人信息"
      left-text="返回"
      right-text="管理"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-uploader :after-read="afterRead" class="zz">
      <template #default>
        <img :src="avatar | filterImage" alt="" class="me6" />
      </template>
    </van-uploader>
    <van-form @submit="onSubmit">
      <!-- 昵称 -->
      <van-field
        class="mt10"
        v-model="nickName"
        name="nickName"
        label="昵称"
        :placeholder="user.nickName"
        :rules="[{ required: false, message: '请填写用户名' }]"
      />
      <!-- 性别 -->
      <van-field name="gender" label="性别" class="mt10">
        <template #input>
          <van-radio-group v-model="gender" direction="horizontal">
            <van-radio name="男生">男生</van-radio>
            <van-radio name="女生">女生</van-radio>
            <van-radio name="未知">保密</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        class="mt10"
        readonly
        clickable
        name="birthday"
        :value="birthday"
        label="生日"
        placeholder="点击选择时间"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-datetime-picker
          type="date"
          @confirm="onConfirm"
          @cancel="showPicker = false"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </van-popup>
      <!-- 年龄 -->
      <van-field name="age" label="年龄" class="mt10">
        <template #input>
          <van-slider v-model="age" active-color="#ee0a24">
            <template #button>
              <div class="custom-button">{{ age }}岁</div>
            </template>
          </van-slider>
        </template>
      </van-field>
      <!-- 生日 -->

      <!-- 地址 使用npm add @vant/area-data 添加城市属性 在data里 设置一个areaList 即可使用
      -->

      <van-field
        class="mt10"
        readonly
        clickable
        name="area"
        :value="address"
        label="居住地址"
        placeholder="点击选择省市区"
        @click="showArea = true"
      />
      <van-popup v-model="showArea" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="onConfirm2"
          @cancel="showArea = false"
        />
      </van-popup>
      <!-- 详细地址 -->
      <van-field
        class="mt10"
        v-model="area"
        name="area"
        label="详细地址"
        placeholder="请输入你的详细地址"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { areaList } from '@vant/area-data';
import { transformTime } from '../service/time';
import { imgUpdateAPI, InfoAPI, AlertUser } from '../service/user';

export default {
  name: 'WorkspaceJsonAlertUser',

  data() {
    return {
      user: {},
      showPicker: false,
      age: '',
      area: '',
      address: '',
      nickName: '',
      gender: '',
      birthday: '',
      areaList,
      avatar: '',
      minDate: new Date(1980, 0, 1),
      maxDate: new Date(2030, 10, 1),
      showArea: false,
      value: '',
    };
  },

  mounted() {},
  async created() {
    const resinfo = await InfoAPI();
    console.log(resinfo);
    this.user = resinfo.data.data;
    this.nickName = resinfo.data.data.nickName;
    this.gender = resinfo.data.data.gender;
    this.age = resinfo.data.data.age;
    this.birthday = resinfo.data.data.birthday;
    this.address = resinfo.data.data.address;
    this.area = resinfo.data.data.area;
    // this.avatar[0].url = "http://localhost:1337" + resinfo.data.avatar;
    this.avatar = resinfo.data.data.avatar;
    console.log(this.avatar);
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        name: 'VueYimutianUser',
      });
    },
    onClickRight() {},
    onConfirm(time) {
      const timetwo = transformTime(time);
      // console.log(timetwo);
      this.birthday = timetwo;
      this.showPicker = false;
    },
    onConfirm2(values) {
      this.address = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/');
      // console.log(this.address);
      this.showArea = false;
    },
    async afterRead(file) {
      //   上传图片格式文件时 若直接上传  图片的二进制字符串过长无法正确上传  所以  使用FormData表单进行加工
      // const data = new FormData();  data.append("file", file.file);
      //   把图片加入到表单文件流的末尾 然后在上传
      const data = new FormData();
      // console.log(file);
      data.append('file', file.file);
      console.log(data);
      const res = await imgUpdateAPI(data);
      this.avatar = res.data.data;
      console.log(res.data.data);
      console.log(this.avatar);

      // console.log(this.avatar);
    },
    async onSubmit() {
      const resx = await AlertUser({
        avatar: this.avatar,
        nickName: this.nickName,
        gender: this.gender,
        age: this.age,
        birthday: this.birthday,
        address: this.address,
        area: this.area,
      });
      console.log(resx);
      if (resx.data.code === 1) {
        Toast.success(resx.data.msg);
        setTimeout(() => {
          this.$router.push({
            name: 'VueYimutianUser',
          });
        }, 2000);
      } else {
        Toast.fail(resx.msg);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
